<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2023-12-12 11:14:35
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2024-01-17 18:07:22
 * @FilePath: /hr_new_vue3/src/views/Management/Home/LeaveManagement/Certificate/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 工作台-离职管理-办理任务(办理工作交接) -->
<template>
  <ContentCard>
    <template #header>
      <PageHeaderNew :title="title"> </PageHeaderNew>
    </template>
    <ConditionBox :margin-bottom="20">
      <template #left>
        <a-space>
          <div style="display: flex">
            <a-select :options="options" v-model="keyWold" />
            <a-input-search
              @press-enter="onSearch"
              @search="onSearch"
              v-model="keyWoldValue"
              placeholder="请输入"
            />
          </div>
          <a-input-search
            @press-enter="onSearch"
            @search="onSearch"
            v-model="phoneData"
            placeholder="输入手机号码搜索"
          />
          <a-button @click="reset">重置</a-button>
        </a-space>
      </template>
      <template #right>
        <a-button type="primary" @click="handleClick(null)">批量处理</a-button>
      </template>
    </ConditionBox>
    <TableTurn :tableData="getTableData" ref="tableRef" :args="args">
      <a-table-column :width="80">
        <template #title> 序号 </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column :width="150" title="离职人员姓名" data-index="userName">
      </a-table-column>
      <a-table-column
        :width="300"
        title="办理事项"
        data-index="handlerMatters"
        :ellipsis="true"
        :tooltip="{
          position: 'top'
        }"
      >
      </a-table-column>
      <a-table-column :width="150" title="办理状态" data-index="status">
        <template #cell="{ record }">
          <span
            :class="{
              'text-[#00b42a]': record.status === 7,
              'text-[#ccc]': record.status === 3,
              'text-blue': record.status === 6 || record.status === 5,
              'text-red': record.status === 4
            }"
            >{{
              record.status === 3
                ? '待确认'
                : record.status === 4
                ? '已驳回'
                : record.status === 5
                ? '已确认'
                : record.status === 6
                ? '进行中'
                : record.status === 7
                ? '已完成'
                : ''
            }}</span
          >
        </template>
      </a-table-column>
      <a-table-column :width="150" title="操作" data-index="">
        <template #cell="{ record }">
          <!-- <a-button
              type="text"
              v-if="record.handleStatus === '已完成'"
              @click="handleClick(record, 2)"
              >查看</a-button
            > -->
          <a-button
            type="text"
            @click="handleClick(record)"
            v-if="record.confirmId === userId && record.status <= 3"
            >交接表确认</a-button
          >
          <a-button
            type="text"
            @click="handleClick(record, 2)"
            v-if="record.status !== 3 || record.supervisorId === userId"
            >查看交接表</a-button
          >
        </template>
      </a-table-column>
    </TableTurn>
  </ContentCard>
</template>

<script lang="tsx" setup>
import { PutEntryProcedure } from '@/apis/management/human/humanChange/entry/index';
import {
  GetHandlerWorkHandoverList,
  GetTransactorWorkHandoverList
} from '@/apis/management/home/leaveManagement';
import { cloneDeep } from 'lodash';
import { Message, Modal } from '@arco-design/web-vue';

const router = useRouter();

const title = '办理任务';

const userId = +localStorage.getItem('userId');

// 模糊查询参数
const options = reactive([
  { label: '姓名', value: 'name' },
  { label: '职位', value: 'positionName' }
]);
// 模糊类型
const keyWold = ref('name');
// 模糊查询值
const keyWoldValue = ref('');

const phoneData = ref('');

let tableRef = ref();

const selectedListData = computed(() => tableRef.value.selectedListData);
const selectedList = computed(() => tableRef.value.selectedList);

// 选择器配置
const args = {
  rowSelection: {
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false
  }
};

const getTableData = async (pageData?: any) => {
  try {
    let res = await GetTransactorWorkHandoverList({
      ...pageData,
      id: userId
    });
    return Promise.resolve(res);
  } catch (error: unknown) {
    console.log(error);
  }
};

// 处理点击
const handleClick = async (record: any | null, type?: number) => {
  try {
    router.push({
      name: 'MyLeaveHandleWorkHandoverTaskDetail',
      query: {
        userId: record.userId,
        type: type ? type : record.confirmId === userId ? 1 : 2
        // type: 3
      }
    });
  } catch (error: unknown) {
    console.log(error);
  }
};

const onSearch = () => {
  refresh();
};

// 重置数据
const reset = () => {
  keyWold.value = 'name';
  keyWoldValue.value = '';
  phoneData.value = '';
  refresh();
};

// 刷新列表
const refresh = (page?: any) => {
  tableRef.value.loadData(page);
};
</script>

<style lang="less" scoped></style>
